<template>
  <div class="login">
    <table></table>
    <div class="loginBox">
      <table></table>
      <div class="head"><img src="../../assets/images/lion.png" alt=""></div>
      <div class="title">微信游戏管理后台</div>
      <form class="common-login">
        <input type="text" class="input" placeholder="用户名" v-model="loginForm.accountName" autocomplete="off" @keyup.enter="submit">
        <input type="password" class="input" placeholder="密 码" v-model="loginForm.passWord" autocomplete="off" @keyup.enter="submit">
        <div @click="submit">登录</div>
      </form>
    </div>
  </div>
</template>
<script>
  export default{
    name: 'login',
    data () {
      return {
        loginForm: {
          accountName: '',
          passWord: ''
        }
      }
    },
    methods: {
      submit () {
        if(! this.loginForm.accountName) {
          this.$message.error("请输入用户名")
          return;
        }
        if(! this.loginForm.passWord) {
          this.$message.error("请输入密码");
          return
        }
        let json = JSON.stringify(this.loginForm);
        let self = this;
        this.$Axios.post('manager/login', json, {contentType: 'application/json'})
          .then(function (res) {
            if (res.data.success) {
              self.$store.commit('SETTOKEN', res.data.data.token)
              sessionStorage.setItem('token', res.data.data.token)
              self.$router.push('/gameIndex')
            }else {
              self.$message.error(res.data.message);
            }
          })
          .catch(function (res) {
            console.log(res)
          })
      }
    }
  }
</script>
<style lang="scss">
  .login{
    width: 100vw;
    height: 100vh;
    background: url('../../assets/images/loginbg.jpg') center center;
    background-size: cover;
    overflow: hidden;
    .loginBox{
      box-sizing: border-box;
      width: 520px;
      height: 360px;
      margin: 200px auto 0;
      background: #fff;
      border-radius: 4px;
      padding: 0 80px;
    }
    .loginBox > .title{
      font-size: 20px;
      color: #333;
      font-weight: bold;
      padding-top: 12px;
      padding-bottom: 30px;
    }
    .loginBox > .head{
      width: 180px;
      height: 180px;
      margin: -90px auto 0;
    }
    .loginBox > .head > img{
      width: 100%;
    }
    .loginBox > form{
      width: 100%;
      overflow: hidden;
    }
    .loginBox > form > div{
      background: #037CFC;
      color: #fff;
      border-radius: 4px;
      padding: 12px 0;
      cursor: pointer;
    }
  }
</style>
